<template>
  <el-dialog
    :visible="visible"
    width="450px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    custom-class="popup-dialog"
    @close="onClose"
  >
    <div class="popup">
      <div class="popup-title">防挂机验证</div>
      <div class="popup-content">{{ datas.alert_content }}</div>
      <div class="popup-submit">
        <el-button type="primary" size="small" @click="handletContinue">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 继续学习
    handletContinue() {
      this.onClose()
      this.$emit('click')
    },
    /*关闭弹窗，以及关闭摄像头功能*/
    onClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss">
.popup-dialog {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.popup {
  padding: 30px 24px;
  &-title {
    font-size: 15px;
    font-weight: 500;
    color: $text-color-import;
    line-height: 24px;
    text-align: center;
  }
  &-content {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    line-height: 24px;
    text-align: center;
  }
  &-submit {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
